// import { Button } from "@/components/ui/button";

// import {
//   FormField,
//   FormItem,
//   FormControl,
//   FormMessage,
//   FormLabel,
//   Form,
// } from "@/components/ui/form";
// import { Input } from "@/components/ui/input";
// import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
// import {
//   Select,
//   SelectContent,
//   SelectItem,
//   SelectTrigger,
//   SelectValue,
// } from "@/components/ui/select";
// import type { UseFormReturn } from "react-hook-form";
// import type { schemaType } from "@/lib/createForm";
// import type { IFormField } from "@/Test/testFormConfig";

// function CreateFormView({
//   form,
//   fields,
//   handleFormSubmit,
// }: {
//   form: UseFormReturn<schemaType>;
//   fields: IFormField[];
//   handleFormSubmit: (data: schemaType) => void;
// }) {
//   console.log(form);

//   const watchedValues = form.watch();

//   const createFieldsView = () => {
//     return (
//       <>
//         {fields.map((fieldItem) => {
//           switch (fieldItem.type) {
//             case "input":
//               return createInputField(form, fieldItem);
//             case "radio":
//               return createRadioField(form, fieldItem);
//             case "select":
//               return createSelectField(form, fieldItem);
//           }
//         })}
//       </>
//     );
//   };

//   const createInputField = (
//     form: UseFormReturn<schemaType>,
//     fieldItem: IFormField
//   ) => {
//     return (
//       <FormField
//         control={form.control}
//         name={fieldItem.name}
//         render={({ field }) => (
//           <FormItem>
//             <FormLabel>{fieldItem.label}</FormLabel>
//             <FormControl>
//               <Input {...field} />
//             </FormControl>
//             <FormMessage />
//           </FormItem>
//         )}
//       />
//     );
//   };

//   const createRadioField = (
//     form: UseFormReturn<schemaType>,
//     fieldItem: IFormField
//   ) => {
//     return (
//       <FormField
//         control={form.control}
//         name={fieldItem.name}
//         render={({ field }) => (
//           <FormItem>
//             <FormLabel>{fieldItem.label}</FormLabel>
//             <FormControl>
//               <RadioGroup onValueChange={field.onChange} value={field.value}>
//                 {fieldItem.options?.map((option) => (
//                   <FormItem
//                     key={option.value}
//                     className="flex items-center space-x-2"
//                   >
//                     <RadioGroupItem
//                       value={option.value}
//                       id={`${fieldItem.name}-${option.value}`}
//                     />
//                     <FormLabel
//                       htmlFor={`${fieldItem.name}-${option.value}`}
//                       className="!m-0 !cursor-pointer"
//                     >
//                       {option.label}
//                     </FormLabel>
//                   </FormItem>
//                 ))}
//               </RadioGroup>
//             </FormControl>
//             <FormMessage />
//           </FormItem>
//         )}
//       />
//     );
//   };

//   const createSelectField = (
//     form: UseFormReturn<schemaType>,
//     fieldItem: IFormField
//   ) => {
//     return (
//       <>
//         {fieldItem.when?.(watchedValues) && (
//           <FormField
//             control={form.control}
//             name={fieldItem.name}
//             render={({ field }) => (
//               <FormItem>
//                 <FormLabel>{fieldItem.label}</FormLabel>
//                 <FormControl>
//                   <Select value={field.value} onValueChange={field.onChange}>
//                     <SelectTrigger>
//                       <SelectValue
//                         placeholder={fieldItem.placeholder ?? "Select a value"}
//                       />
//                     </SelectTrigger>
//                     <SelectContent>
//                       {fieldItem.options?.map((option) => (
//                         <SelectItem value={option.value}>
//                           {option.label}
//                         </SelectItem>
//                       ))}
//                     </SelectContent>
//                   </Select>
//                 </FormControl>
//                 <FormMessage />
//               </FormItem>
//             )}
//           />
//         )}
//       </>
//     );
//   };

//   const onSubmit = (data: schemaType) => {
//     handleFormSubmit(data);
//   };

//   return (
//     <>
//       <Form {...form}>
//         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
//           {createFieldsView()}
//           <Button type="submit">Submit</Button>
//         </form>
//       </Form>
//     </>
//   );
// }

// export default CreateFormView;
